Typography
Head Levels
This Is an h1
H1 goes at the top of the page.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This Is an h2
H2 usually goes after H1Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
This Is an h3
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
This Is an h4
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
This Is an h5
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
This Is an h6
Vivamus at augue eget arcu dictum. Convallis aenean et tortor at. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Pulvinar mattis nunc sed blandit libero. Convallis tellus id interdum velit.
HTML
<h1>This Is an h1</h1>
<h2>This Is an h2</h2>
<h3>This Is an h3</h3>
<h4>This Is an h4</h4>
<h5>This Is an h5</h5>
<h6>This Is an h6</h6>
Problem Being Solved
Developers need heads for various sections on a page.
When to Use
Head levels should be used when labeling a section.
When Not to Use
Do not use if another appropriate element should be used (ex: a legend in a fieldset or a label in a form).
Formatting
- Always use head levels in order.
- Always nest appropriately.
- If you need a look of a certain head level (on a different head level or something else), you can use the class name of that head level — class="h1", class="h4", etc...
Alternate Head Styles
This Is an h1 with Alt Styles
This Is an h2 with Alt Styles
This Is an h3 with Alt Styles
This Is an h4 with Alt Styles
This Is an h4 with Alt Short Underline Styles.
This Is an h5 with Alt Styles
This Is an h6 with Alt Styles
HTML
<h1 class="alt">This Is an h1 with Alt Styles</h1>
<h2 class="alt">This Is an h2 with Alt Styles</h2>
<h3 class="alt">This Is an h3 with Alt Styles</h3>
<h4 class="alt">This Is an h4 with Alt Styles</h4>
<h4 class="alt-underline color-changer-init after-border">This Is an h4 with Alt Short Underline Styles.</h4>
<h5 class="alt">This Is an h5 with Alt Styles</h5>
<h6 class="alt">This Is an h6 with Alt Styles</h6>
Problem Being Solved
Developers need alternative styled heads for various sections on a page.
When to Use
- Head levels should be used when labeling a section.
- Only use if a designer has requested an alt head style.
When Not to Use
- Do not use if another appropriate element should be used (ex: a legend in a fieldset or a label in a form).
- Do not use if a designer has not requested an alt head style.
Formatting
- Always use head levels in order.
- Always nest appropriately.
- If you need a look of a certain head level (on a different head level or something else), you can use the class name of that head level — class="h1-alt", class="h4-alt", etc...
Default Body Section
Body item text
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
HTML
<section>
<p>Body item text</p>
<p>Another body item text example</p>
</section>
Problem Being Solved
A developer needs paragraph level text.
When to Use
Use if you need generic text or paragraph level text.
When Not to Use
Do not use if another appropriate elment can and should be used.
Formatting
- This style applies to most plain text. If there is not a specific section below for a content structure, default to this.
- Use an H2 if there is a title.
- Use P for text.
- Not every <p></p> tag needs to be wrapped in a section. Section tags are to note the start/end of anew component area.
Fonts
Lato
The Chartered Financial Analyst® (CFA®) credential has become the most respected and recognized investment designation in the world; enrolling in the CFA Program is your first step toward earning this qualification.
HTML
<>N/A<>
Problem Being Solved
CFA Institute needs to have a consistent font throughout our web properties.
When to Use
This will be the default font for all elements.
When Not to Use
Do not override our default fonts. If you ever needed to, you MUST speak with a designer first so they can bring it to our team for approval.
Formatting
All font will be Lato.
Links
HTML
<p>
<a href="#">Normal link</a>
</p>
<p>
<a href="#" class="int-nav">Learn how to become a member</a>
</p>
Problem Being Solved
A developer needs to link to a section on a page or to navigate to another page.
When to Use
Use a link if you're navigating somewhere (a different point on a page or a new page).
When Not to Use
Do not use a link if a button should be used instead (or vice versa) — a link navigates you to a place, a button does something (submits a form, opens a modal, etc...).
Formatting
- Links always have an underline.
- NEVER use target="_blank" to open a new page with anchor links due to accessiblity issues.
Alignment
Right Aligned .text-right
Center Aligned .text-center
Left Aligned .text-left
HTML
Problem Being Solved
Text needs to be aligned other than the locale default.
When to Use
Design dictates a non-default alignment.
When Not to Use
For fun
Note
These classes can be applied to any element or container element.